<!--
 * @Author: 王灿
 * @Date: 2019-12-21 23:33:06
 * @LastEditTime : 2019-12-22 15:22:50
 * @LastEditors  : Please set LastEditors
 * @Description: 订单详情
 * @FilePath: \scarlet-sparrow-admin\src\views\order\order-details\index.vue
 -->
<template>
  <div class="el-form__details order-details">
    <el-form v-for="(details, key) in orderDetailDTOS" :key="key">
      <h4>商品{{key+1}}</h4>
      <el-form-item label="商品名称">
        <el-input :value="details.productName" readonly></el-input>
      </el-form-item>
      <el-form-item label="商品介绍">
        <el-input :value="details.introduce" readonly></el-input>
      </el-form-item>
      <el-form-item label="商品价格">
        <el-input :value="details.productPrice" readonly></el-input>
      </el-form-item>
      <el-form-item label="商品数量">
        <el-input :value="details.productNumber" readonly></el-input>
      </el-form-item>
      <el-form-item label="商品图片">
        <el-image 
          style="width: 100px; height: 100px"
          :src="srcList[key]" 
          :preview-src-list="srcList">
        </el-image>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getOrderDeliver } from '@/api/order.js'
import { getDownUrl } from '@/api/commodity.js'
export default {
  name: 'OrderDetails',
  props: {
    // 默认数据
    orderDetailDTOS: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      // 商品主图
      srcList: []
    }
  },
  watch: {
    // 监听商品主图片
    orderDetailDTOS() {
      if (this.orderDetailDTOS.length !== 0) {
        this.onGetSrcList()
      }
    }
  },
  created() {
    if (this.orderDetailDTOS.length !== 0) {
      this.onGetSrcList()
    }
  },
  methods: {
    onGetSrcList() {
      let i = 0
      let len = this.orderDetailDTOS.length
      this.srcList = []
      this.onGetDownUrl(i, len)
    },
    onGetDownUrl(i, len) {
      // 下载图片并显示
      getDownUrl({
        fileName: this.orderDetailDTOS[i].mainPic
      }).then(response => {
        this.srcList.push(response.data.url.split("?")[0])
        if (i < len - 1) {
          i++
          this.onGetDownUrl(i, len)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.el-form__details {
  &.order-details {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    .el-form {
      flex: 1;
      padding: 10px;
      .el-form-item {
        @include row;
        .el-form-item__content {
          flex: 1;
        }
      }
    }
  }
}
</style>
